<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
			}
			#nav ul {
				zoom: 1;
				overflow: hidden;
				list-style: none;
				margin: 0;
				padding: 0;
				background: #333;
			}
			
			#nav li {
				float: left;
				width: 150px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				text-decoration: none;
			}
			
			#nav a {
				color: #FFFFFF;
				text-decoration: none;
			}
			
			#nav a .en {
				display: none;
			}
			
			#nav a:hover {
				display: block;
				background: #000;
				color: #ddd;
			}
			
			#nav a:hover .en {
				display: inline;
			}
			
			#nav a:hover .cn {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="nav">
				<ul>
					<li id="first">
						<a href="index.html"><span class="cn">首页</span><span class="en">首页</span></a>
					</li>


					<li>
						<a href="boom.html"><span class="cn">LED时钟</span><span class="en">LED时钟</span></a>
					</li>
					<li>
						<a href="pingBao.html"><span class="cn">屏保弹跳</span><span class="en">屏保弹跳</span></a>
					</li>


					<li>
						<a href="TIji.html"><span class="cn">太极运动</span><span class="en">太极运动</span></a>
					</li>


					<li>
						<a href="shuaiWei.html"><span class="cn">摆尾效果</span><span class="en">摆尾效果</span></a>
					</li>
					
					<li>
						<a href="shadow.html"><span class="cn">阴影效果</span><span class="en">阴影效果</span></a>
					</li>
					
					<li>
						<a href="tanTanTan.html"><span class="cn">小球的弹跳</span><span class="en">小球的弹跳</span></a>
					</li>


					<li>
						<a href="house.html"><span class="cn">Canvas小房子</span><span class="en">Canvas小房子</span></a>
					</li>
				</ul>
			</div>
		<canvas id="myCanvas" width="1400" height="750"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("myCanvas");
			var ctx = canvas.getContext("2d");
			
			
			var arcArr = [
			[20,100,15,5,0,"yellow"],
			[20,100,10,10,0,"red"],
			[20,100,15,15,5,"lightpink"]
			];

			setInterval(function(){
				arcArr.push([20,100,8,6,10,"white"]);
	
			},1000);
			

			setInterval(function(){
				ctx.fillStyle = "rgba(0,0,0,0.1)";
				ctx.fillRect(0,0,1400,750);
				
				for (var i = 0; i < arcArr.length; i++ ){
					ctx.beginPath();
					ctx.fillStyle = arcArr[i][5];
				
				
				ctx.beginPath();
				ctx.fillStyle=arcArr[i][5];
				var arcX = arcArr[i][0];
				var arcY = arcArr[i][1];
				var arcR = arcArr[i][2];
				var arc_vx = arcArr[i][3];
				var arc_vy = arcArr[i][4];
				ctx.arc(arcArr[i][0],arcArr[i][1],arcArr[i][2],0,2*Math.PI);
				ctx.fill();
				arcArr[i][1] = arcArr[i][1] + arcArr[i][4];
				arcArr[i][4] = arcArr[i][4] + 0.5;
				arcArr[i][0] = arcArr[i][3] +arcArr[i][0];
				
				
				
				if(arcArr[i][1]>750-arcArr[i][2]){
					arcArr[i][4]=-arcArr[i][4];
					arcArr[i][4]=arcArr[i][4]*0.9;
					arcArr[i][1]=750-arcArr[i][2];
				}
				if(arcArr[i][0]>1400-arcArr[i][2]){
					arcArr[i][3]=-arcArr[i][3];
					arcArr[i][0]=1400-arcArr[i][2];
				}
				if(arcArr[i][0]<arcArr[i][2]){
					arcArr[i][3]=-arcArr[i][3];
					arcArr[i][0]=arcArr[i][2];
				}
				}
			},16);
		</script>
	</body>
</html>
